<template>
    <div class="top">
        <slot name="title"></slot>
      
        <el-button type="primary" @click="drawer = true">添加不可见的人</el-button>
    </div>

    <el-drawer v-model="drawer" :direction="direction">
        <template #header>
            <h4>添加不可见的人</h4>
        </template>
        <template #default>
            <div class="top">
                <el-input v-model="input2" style="width: 70%;" placeholder="用户名" />
                <el-button type="primary" @click="getUsers">搜索用户</el-button>
            </div>
            <div style="height: 60%;">
                <el-table border class="table" v-loading="loading" ref="multipleTableRef"
                    :header-cell-style="{ backgroundColor: 'var(--backcor)' }"
                    :cell-style="{ height: '50px', backgroundColor: 'var(--backcor)' }" :data="userList"
                    style="width: 100% " height="100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column property="id" label="id" width="150">
                    </el-table-column>
                    <el-table-column property="name" label="用户名" min-width="150" />
                    <el-table-column property="organization" label="所属组织" min-width="100" show-overflow-tooltip />
                </el-table>

            </div>
            <el-scrollbar style="height: 25%;" height="100%">
                <TransitionGroup class="users" tag="ul" name="list">
                    <div v-for="item in multipleSelection" class="use" :key="item.id">
                        <img :src="item.imageUrl" alt="">
                        <div>
                            {{ item.name }}
                        </div>
                    </div>
                </TransitionGroup>
            </el-scrollbar>

        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="drawer = false">取消</el-button>
                <el-button type="primary" @click="funs(multipleSelection),drawer=false">确定</el-button>
            </div>
        </template>
</el-drawer>
</template>

<script lang="ts" setup>

import { ref, reactive } from "vue"
import { showAllUser } from '@/request/api'
import type { List } from '@/type/admin'

import { ElTable } from 'element-plus'

interface Request {
    /**
     * 关键词，可按照id，姓名模糊匹配
     */
    keyword?: string;
    /**
     * 页码
     */
    pageIndex?: number;
    /**
     * 页大小
     */
    pageSize?: number;
}
const data = defineProps<{
    funs: Function

}>()


let input2 = ref('')                //不可见搜索框
let drawer = ref<boolean>(false)
const direction = ref('rtl')
let loading = ref(false)
let pageIndexs = 0              //下标
let userList = reactive<List[]>([])       //用户列表


//获取数据
const requestUser = (pageIndex: number) => {
    loading.value = true
    showAllUser<Request>({
        pageIndex,
        keyword: input2.value,
        pageSize: 100
    }).then(res => {
        userList.length = 0
        pageIndexs++
        userList.push(...res.data.list)
        if (res.data.list.length >= 100) {
            requestUser(pageIndexs)
        }
        loading.value = false
    })
}
//搜索不可见的好友
const getUsers = () => {
    userList.length = 0
    pageIndexs = 0
    requestUser(pageIndexs)
}
requestUser(pageIndexs)
//表格处理逻辑
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<List[]>([])       //选中的表格
const handleSelectionChange = (val: List[]) => {
    multipleSelection.value = val
}

</script>

<style lang=less  scoped>
.top {
    margin: 2vh 0px;
    margin-right: 2vw;
    display: flex;
    justify-content: space-between;
}

.users {
    display: flex;

    flex-wrap: wrap;

    .use {
        margin: 10px 5px;
        font-size: 10px;
        text-align: center;
        padding: 3px;
        border: 1px solid #ebebeb80;
    }
}

img {
    width: 50px;
    border-radius: 50%;
    aspect-ratio: 1/1;
}

/* 1. 声明过渡效果 */
.list-enter-active,
.list-leave-active {
    transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
</style>